<template>
	<div class="icons">
		<swiper :options="swiperOption" ref="mySwiper">
			<swiper-slide v-for="page of pages" :key="page.index">
				<div class="icon" v-for="item of page" :key="item.id">
					<div class="icon-img">
						<img class="icon-img-content" :src='item.imgUrl'/>
					</div>
					<p class="icon-desc">{{item.desc}}</p>
				</div>
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>
	
<script>
	export default{
		name:'HomeIcon',
		props:{
			iconList:Array
		},
		data(){
			return {
				swiperOption:{
					pagination:'.swiper-pagination',
					loop:true
				},
			}
		},
		computed:{
			pages(){
				//一页八条数据，用Math.floor取整，遍历数组将9条数据分成两页，再把内容push到每一页当中
				const pages=[];
				this.iconList.forEach((item,index)=>{
					const page=Math.floor(index/8);
					if (!pages[page]) {
						pages[page]=[]
					}
					pages[page].push(item);
				})
				return pages
			},
			swiper() {
        		return this.$refs.mySwiper.swiper
      		},
		},
		mounted(){
			this.swiper.slideTo(1, 1000, false)
		}
	}
</script>

<style lang='stylus' scoped>
	@import '../../../assets/styles/minxins.styl'
	.icons >>> .swiper-container
		height:0
		padding-bottom:50%
	.icons
		background:#fff
		.icon
			position:relative
			float:left
			width:25%
			padding-bottom:25%
			height:0
			overflow:hidden
			.icon-img
				position:absolute
				top:0rem
				left:0
				right:0
				bottom:0.44rem
				box-sizing:border-box
				width:100%
				height:70%
				padding:0.1rem
				.icon-img-content
					display:block
					margin:0 auto
					height:100%
			.icon-desc
				position:absolute
				right:0
				left:0
				bottom:0.3rem
				height:0.4rem
				line-height:0.4rem
				text-align:center
				color:#333
				font-size:0.35rem
				ellipsis()

</style>